<%--
  Created by IntelliJ IDEA.
  User: xiaomi
  Date: 2025/2/4
  Time: 19:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
        }

        table,
        th,
        td {
            border: 1px solid rgb(165, 184, 213);
        }
        th,
        td {
            text-align: center;
            padding: 8px;
        }
        th{
            background: rgb(165, 184, 213);
            color: white;
        }
        button {
            padding: 5px 10px;
            margin: 5px;
            border: none;
            border-radius: 3px;
            background-color:rgb(165, 184, 213);
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: rgb(125, 166, 217);
        }

        input[type = "checkbox"] {
            margin-right: 5px;
        }
        #editModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .modal-buttons {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div style="margin-bottom: 20px;">
    <input type="text" placeholder="查询课程">
    <button id="searchBtn" >查询</button>
    <button id="resetBtn">重置</button>
</div>
<table id="courseTable">
    <tr>
        <th>课程图片</th>
        <th>名称</th>
        <th>教师</th>
        <th>类型</th>
        <th>价格</th>
        <th>人数</th>
        <th>课程标签</th>
        <th>审核状态</th>
        <th>操作</th>
    </tr>
</table>
<div id="editModal">
    <h3>编辑课程</h3>
    <label>课程名称: <input type="text" id="editGoodname"></label><br>
    <label>课程类型: <input type="text" id="editType"></label><br>
    <label>课程价格: <input type="text" id="editMoney"></label><br>
    <label>课程人数: <input type="text" id="editNum"></label><br>
    <label>课程标签: <input type="text" id="editTool"></label><br>
    <div class="modal-buttons">
        <button id="saveEditButton">保存</button>
        <button id="cancelEditButton">取消</button>
    </div>
</div>
<script>
    $(document).ready(function () {
        function setColorByState(cell, state) {
            if (state == 0) {
                cell.css('color', '#FF8247');
            } else if (state == 1) {
                cell.css('color', 'green');
            } else if (state == 2) {
                cell.css('color','red');
            }
        }
        var teachername = sessionStorage.getItem('username');
        var url = './teacher/searchlist/'+teachername;
        // 使用AJAX获取课程信息
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                var table = $('#courseTable');
                data.forEach(function (course) {
                    var row = $('<tr></tr>');
                    var imgCell = $('<td></td>');
                    var img = $('<img>', {
                        src: course.picture,
                        alt: '课程图片',
                        width: '100'
                    });
                    imgCell.append(img);
                    row.append(imgCell);

                    row.append($('<td></td>').text(course.classname));
                    row.append($('<td></td>').text(course.classteacher));
                    row.append($('<td></td>').text(course.classtype));
                    row.append($('<td></td>').text(course.money));
                    row.append($('<td></td>').text(course.number));
                    row.append($('<td></td>').text(course.usertools));
                    // row.append($('<td></td>').text(course.state));
                    var stateCell = $('<td></td>');
                    var stateText = $('<span></span>');
                    if(course.state == 0){
                        stateText.text("待审核");
                    }else if(course.state == 1){
                        stateText.text("已通过");
                    }else if (course.state ==  2){
                        stateText.text("未通过");
                    }
                    setColorByState(stateCell, course.state);
                    stateCell.append(stateText);
                    row.append(stateCell);

                    var buttonCell = $('<td></td>');
                    var deleteButton = $('<button>', {
                        text: '删除',
                        class: 'deleteButton',
                        id: 'deleteButton',
                        'data-course-id': course.id
                    });
                    if(course.state == 0 ){
                        var updateButton = $('<button >', {
                            text: '修改',
                            id: 'updateButton',
                            'data-course-id': course.id,
                            class: 'updateButton'
                        });
                        buttonCell.append(deleteButton).append(updateButton);
                        row.append(buttonCell);
                    }else {
                        buttonCell.append(deleteButton);
                        row.append(buttonCell);
                    }

                    table.append(row);
                });
            },
            error: function () {
                alert('获取课程信息失败');
            }
        });

        $(document).on('click','#deleteButton',function () {
            var id = $(this).attr('data-course-id');
            var row = $(this).closest('tr'); // 获取当前行
            var classtype = row.find('td:eq(3)').text();
            var list = {
                id: id,
                classtype: classtype
            }
            $.ajax({
                url: './teacher/delete1',
                type: 'POST',
                data: JSON.stringify(list),
                contentType: 'application/json',
                success: function () {
                    alert('删除课程成功');
                    location.reload();
                },
                error: function () {
                    alert('删除课程失败');
                }
            })
        });
        $(document).on('click','#updateButton',function () {
            selectedCourseId = $(this).attr('data-course-id');
            var row = $(this).closest('tr');
            var goodname = row.find('td:eq(1)').text();
            var money = row.find('td:eq(3)').text();
            var type = row.find('td:eq(4)').text();
            var context = row.find('td:eq(5)').text();
            var time = row.find('td:eq(6)').text();
            // 填充模态框数据
            $('#editGoodname').val(goodname);
            $('#editType').val(money);
            $('#editMoney').val(type);
            $('#editNum').val(context);
            $('#editTool').val(time);
            // 显示模态框
            $('#editModal').show();
        });
        $('#cancelEditButton').click(function () {
            $('#editModal').hide();
        });
        $('#saveEditButton').click(function () {
            var id = selectedCourseId;
            var classname = $('#editGoodname').val();
            var classtype = $('#editType').val();
            var number = $('#editNum').val();
            var money = $('#editMoney').val();
            var usertools = $('#editTool').val();
            var user = {
                id:id,
                classname: classname,
                classtype: classtype,
                number: number,
                money: money,
                usertools: usertools
            };
            $.ajax({
                url: './teacher/update',
                type: 'POST',
                data: JSON.stringify(user),
                contentType: 'application/json',
                success: function () {
                    alert('修改课程信息成功');
                    location.reload();
                },
                error: function () {
                    alert('修改课程信息失败');
                }
            })
        });
        $('#searchBtn').click(function () {
            var classname = $('input[type = "text"]').val();
            var list = {
                classname: classname,
                teachername: teachername,
                del: "1"
            };
            $.ajax({
                url: './teacher/searchBy',
                type: 'POST',
                data: JSON.stringify(list),
                contentType: 'application/json',
                success: function (data) {
                    var table = $('#courseTable');
                    table.empty();
                    data.forEach(function (course) {
                        var row = $('<tr></tr>');
                        var imgCell = $('<td></td>');
                        var img = $('<img>', {
                            src: course.picture,
                            alt: '课程图片',
                            width: '100'
                        });
                        imgCell.append(img);
                        row.append(imgCell);

                        row.append($('<td></td>').text(course.classname));
                        row.append($('<td></td>').text(course.classteacher));
                        row.append($('<td></td>').text(course.classtype));
                        row.append($('<td></td>').text(course.money));
                        row.append($('<td></td>').text(course.number));
                        // row.append($('<td></td>').text(course.state));
                        var stateCell = $('<td></td>');
                        var stateText = $('<span></span>');
                        if(course.state == 0){
                            stateText.text("待审核");
                        }else if(course.state == 1){
                            stateText.text("已通过");
                        }else if (course.state ==  2){
                            stateText.text("未通过");
                        }
                        setColorByState(stateCell, course.state);
                        stateCell.append(stateText);
                        row.append(stateCell);
                        if(course.state == 0 ){
                            var buttonCell = $('<td></td>');
                            var deleteButton = $('<button>', {
                                text: '删除',
                                class: 'deleteButton'
                            });
                            var updateButton = $('<button>', {
                                text: '修改',
                                class: 'updateButton'
                            });
                            buttonCell.append(deleteButton).append(updateButton);
                            row.append(buttonCell);
                        }
                        table.append(row);
                    });
                },
                error: function () {
                    alert('查询失败');
                }
            })
        });
        // 重置按钮点击事件（这里可以重新发送初始的AJAX请求获取全部数据）
        $('#resetBtn').click(function () {
            location.reload();
        });
    });
</script>
</body>
</html>